<template>
  <div class="table">
    <div class="table-main">
      <!-- 查询框 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="课程名称">
          <el-input
            v-model="formInline.user"
            placeholder="请输入课程名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <!--新增按钮-->

      <el-col :span="1" class="grid">
        <el-button
          type="success"
          icon="el-icon-circle-plus-outline"
          size="mini"
          style="width: 115px; height: 40px; font-size: 16px"
          @click="dialogVisible = true"
          >增加课程</el-button
        >
      </el-col>

      <el-table
        :data="tableData"
        border
        style="width: 100%; font-size: 18px"
        stripe
        ref="multipleTable"
        tooltip-effect="dark"
      >
        <!--索引-->

        <el-table-column prop="id" label="编号" width="200"> </el-table-column>
        <el-table-column prop="photo" label="图片" width="200">
          <template scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <img
                :src="'http://localhost:3000/' + scope.row.photo"
                alt="图片加载失败"
                style="width: 540px; height: 340px"
              />
              <img
                slot="reference"
                :src="'http://localhost:3000/' + scope.row.photo"
                style="width: 100px; height: 60px"
                alt="图片加载失败"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="课程名称" width="340">
        </el-table-column>
        <el-table-column prop="category" label="课程状态" width="160">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.category == 1"
              type="success"
              style="width: 100px; height: 30px"
              ><span style="font-size: 16px">课程进行中</span></el-tag
            >
            <el-tag
              v-if="scope.row.category == 0"
              type="danger"
              style="width: 100px; height: 30px"
            >
              <span style="font-size: 16px">课程已结束</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="编辑" width="110">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="(dialogVisible = true), changeForm(scope.row)"
              icon="el-icon-edit"
              size="mini"
              style="width: 85px; height: 30px; font-size: 15px"
              >编辑</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="删除" width="110">
          <template slot-scope="scope">
            <el-button
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              icon="el-icon-delete"
              size="mini"
              style="width: 85px; height: 30px; font-size: 15px"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--表格数据及操作-->

    <!-- 修改对话框 -->
    <div>
      <el-dialog
        title="修改"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form label-position="labelPosition" label-width="80px">
          <el-form-item label="图片">
            <el-input v-model="currentRow.photo"></el-input>
          </el-form-item>
          <el-form-item label="课程名称">
            <el-input v-model="currentRow.name"></el-input>
          </el-form-item>
          <el-form-item label="课程状态">
            <el-input v-model="currentRow.category"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="(dialogVisible = false), modify()"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 添加对话框 -->
    <!-- <div>
      <el-dialog
        title="添加"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form label-position="labelPosition" label-width="80px">
          <el-form-item label="编号">
            <el-input v-model="addForm.id"></el-input>
          </el-form-item>
          <el-form-item label="图片">
            <el-input v-model="addForm.photo"></el-input>
          </el-form-item>
          <el-form-item label="课程名称">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="课程状态">
            <el-input v-model="addForm.category"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="(dialogVisible = false), add()"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div> -->
    <!--分页条-->
    <!-- <el-pagination background layout="prev, pager, next" :total="100">
    </el-pagination> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      //当前行
      currentRow: {},
      dialogVisible: false,
      addForm: {
        photo: "",
        name: "",
        category: "",
        id: "",
      },
      formInline: {
        user: "",
        region: "",
      },
    };
  },
  created() {
    this.query();
  },
  methods: {
    // 刷新
    query() {
      this.axios.get(" http://localhost:3000/videocourse").then((response) => {
        this.tableData = response.data;
      });
    },
    // 删除方法
    handleDelete(index, row) {
      alert(row.id);
      this.axios
        .delete("http://localhost:3000/videocourse/" + row.id)
        .then((response) => {
          this.tableData.splice(index, 1);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //弹出对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 点击编辑按钮
    changeForm(row) {
      this.currentRow = row;
    },
    //修改方法
    modify() {
      this.axios
        .put("http://localhost:3000/videocourse/" + this.currentRow.id, {
          photo: this.currentRow.photo,
          name: this.currentRow.name,
          category: this.currentRow.category,
        })
        .then((response) => {
          this.query();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 添加方法
    add() {},
    // 查询方法
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>
<style>
.table {
  width: 1122px;
  margin: auto;
  /* background-color: red; */
  margin-top: 30px;
}
</style>